<template>
	<!-- 外层包一层容器，保证 flex 环境生效 -->
	<view class="container">
		<!-- 导航栏组件 -->
		<CustomNavigation :title="title" :navigationImage="navigationImage" :hideNavigation="hideNavigation"
			:hideBack="hideBack" @goBackAction="goBackAction" />

		<scroll-view v-if="props.useScrollView" class="base-container" :refresher-triggered="loading"
			@refresherrefresh="onRefresh" @scrolltolower="onLoadMore" lower-threshold="100" :class="{
		    'no-horizontal-padding': props.disHorPadding,
		    'no-vertical-padding': props.disVerPadding
		  }" scroll-y :style="{
		    marginTop: topInsets + 'px',
		    height: contentHeight + 'px',
			paddingTop: 0 + 'px',
		    paddingBottom: bottomInsets + 'px',
			paddingLeft: 16 + 'px',
			paddingRight: 16 + 'px',
		    backgroundColor: props.navigationImage ? 'transparent' : props.backgroundColor || '#F8F8F8',
		  }">
			<view class="scrollView-container">
				<slot />
			</view>
		</scroll-view>

		<view v-else class="base-container" :class="{
		    'no-horizontal-padding': props.disHorPadding,
		    'no-vertical-padding': props.disVerPadding
		  }" :style="{
		    marginTop: topInsets + 'px',
		    height: contentHeight + 'px',
			paddingTop: 0 + 'px',
		    paddingBottom: bottomInsets + 'px',
			paddingLeft: 16 + 'px',
			paddingRight: 16 + 'px',
		    backgroundColor: props.navigationImage ? 'transparent' : props.backgroundColor || '#F8F8F8'
		  }">
			<slot />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import CustomNavigation from '@/components/custom-navigation/index.vue'
	import { BaseViewModel } from '@/utils/base/viewmodel';
	import { usePageLayout } from '@/utils/hooks/usePageLayout'
	const {
		statusBarHeight,
		navHeight,
		contentWidth,
		contentHeight,
		topInsets,
		bottomInsets,
		updateLayout
	} = usePageLayout()

	const props = defineProps<{
		title : string
		navigationImage : boolean
		hideNavigation : boolean
		hideBack : boolean
		useScrollView : boolean
		tabbar : boolean
		disHorPadding : boolean
		disVerPadding : boolean
		backgroundColor : string
		loading : boolean
	}>()

	const emit = defineEmits(['goBackAction', 'onRefresh', 'onLoadMore'])

	onMounted(() => {
		updateLayout(props.hideNavigation ? false : true, props.tabbar)
	})

	const goBackAction = () => {
		if (props.hideBack) {
			emit('goBackAction')
		} else {
			uni.navigateBack()
		}
	}

	const onRefresh = () => {
		emit('onRefresh')
	}

	const onLoadMore = () => {
		emit('onLoadMore')
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		flex: 1;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
	}

	.base-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		gap: 12px;
	}

	.no-horizontal-padding {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.no-vertical-padding {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.scrollView-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		gap: 12px;
		scrollbar-width: none;
	}
</style>